<div class="module-content module-vertical">
    <div class="module-header">
        <div class="module-header-title">
            <nz-breadcrumb>
                <nz-breadcrumb-item>
                    学生列表
                </nz-breadcrumb-item>
            </nz-breadcrumb>
        </div>
    </div>
    <div class="module-body">
        <div class="panel panel-grid" style="padding: 10px; box-shadow: none;">
            <div class="panel-heading" style="display: grid; grid-gap: 10px; grid-template-columns: auto 1fr 200px auto; margin-bottom: 10px;">
                <span>年级：</span>
                <nz-radio-group [(ngModel)]="option.level" nzButtonStyle="solid" (ngModelChange)="filter()">
                    <label nz-radio-button nzValue="all">全部</label>
                    <label nz-radio-button nzValue="2018">2018</label>
                    <label nz-radio-button nzValue="2019">2019</label>
                    <label nz-radio-button nzValue="2020">2020</label>
                </nz-radio-group>
                <div>
                    <nz-input-group [nzSuffix]="suffixIconSearch">
                        <input type="text" nz-input placeholder="搜索" name="keyword" [(ngModel)]="option.keyword" (ngModelChange)="filter()"/>
                    </nz-input-group>
                    <ng-template #suffixIconSearch>
                        <i nz-icon nzType="search"></i>
                    </ng-template>
                </div>
                <button nz-button nzType="primary" nz-tooltip nzTitle="添加" (click)="studentDlg.create()">
                    <i nz-icon nzType="plus-square"></i>
                </button>
                
            </div>

            <div class="panel-body" style="min-width: 800px;">
                <nz-table #list [nzFrontPagination]="true" [nzData]="students" [nzShowPagination]="true">
                    <thead>
                    <tr style="font-weight: bold;">
                        <th style="width: 10%;padding: 8px">#</th>
                        <th style="width: 20%;">姓名</th>
                        <th style="width: 10%;">学号</th>
                        <th style="width: 10%;">年级</th>
                        <th style="width: 15%;">邮箱</th>
                        <th style="width: 15%;">电话</th>
                        <th style="width: 20%;text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let item of list.data; let i = index">
                        <td style="width: 10%;padding: 8px">{{ (list.nzPageIndex - 1) * list.nzPageSize + i + 1}}</td>
                        <td style="width: 20%; padding: 8px;height:60px;">{{item.name}}</td>
                        <td style="width: 10%; padding: 8px;height:60px;">{{item.code}}</td>
                        <td style="width: 10%; padding: 8px;height:60px;">{{item.level}}</td>
                        <td style="width: 15%; padding: 8px;">{{item.email}}</td>
                        <td style="width: 15%; padding: 8px;height:60px;">{{item.mobile}}</td>
                        <td style="width: 20%;text-align: center; padding: 8px;">
                            <div class="action">
                                <button nz-button nzType="primary" nzSize="small" nz-tooltip nzTitle="编辑" (click)="edit(item)">
                                    <i nz-icon nzType="edit"></i>
                                </button>
                                <button nz-button nzType="primary" nzDanger nzSize="small" nz-tooltip nzTitle="删除" (click)="delete(item)">
                                    <i nz-icon nzType="delete"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>

            </div>
        </div>
    </div>
</div>

<app-student-dialog #studentDlg (onSubmit)="submit($event)"></app-student-dialog>




